<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="title" th:content="'产品详情_'+${title}" />
    <meta name="description" th:content="${description}" />
    <meta name="keywords" th:content="${keywords}" />
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>产品详情</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/index.css">
    <script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/index.js"></script>
    <script src="../../js/grabber.js"></script>
    <style>
        .cOYSvF {
            background-color: #f3f8fb;
        }

        .fFDaJv {
            box-shadow: none;
        }

        .bigImg .swiper-wrapper {
            display: flex;
            align-items: center;
        }

        .img_x {
            /* width: 350px; */
            height: 77px;
            border: 1px solid #eee;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .img_x li {
            width: 54px;
            height: 54px;
            border: 2px solid transparent;
            margin: 8px 4px;
            padding: 2px;
            cursor: pointer;
            box-sizing: border-box;
        }

        .img_x li img {
            max-width: 100%;
            max-height: 100%;
        }

        .img_u {
            width: 500px;
            height: 450px;
            border: 1px solid #eee;
            float: left;
            margin-left: 15px;
            overflow: hidden;
            display: none;
        }

        .magnifier {
            position: absolute;
            display: none;
            width: 200px;
            height: 200px;
        }

        .mediumContainer {
            width: 350px;
            height: 350px;
            border: 1px solid #eee;
            overflow: hidden;
        }

        .mediumContainer img {
            vertical-align: middle;
            max-width: 100%;
            max-height: 100%;
        }

        #zhezhao {
            width: 350px;
            height: 350px;
            background: transparent;
            position: absolute;
            top: 0;
            border: 1px solid transparent;
        }

        #zhezhao:hover {
            cursor: move;
        }

        .img_u {
            height: 350px;
            width: 350px;
            overflow: hidden;
            display: none;
            position: absolute;
            right: -350px;
            top: 0;
        }

    </style>
</head>
<body>
<div id="root">
    <div>
        <div class="cOYSvF">
            <div class="header-page"></div>
            <div class="swiper-shop swiper-container">
                <div class="swiper-wrapper">
                    <div th:each="banner :${banners}" class="swiper-slide"
                         th:style="'background: url(' + ${banner.images} + ');'"
                    ></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="eZHbVe" style="margin-top: 30px;">
                <div class="fQWhJi">
                    <div class="bwrJXS">
                        <div class="LMdLD">
                            <ol class="cfwALV">
                                <li>
                                    <a href="">
                                        <i class="fa fa-home breadcrumb-margin-right"></i>
                                        <span>首页</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span>一级分类</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span>二级分类</span>
                                    </a>
                                </li>
                                <li>
                                    <span class="dJHLyI">产品</span>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <div class="fQWhJi">
                        <div class="cOQGsL bWxvtx">
                            <div class="Mhpno container just-content-between align-center">
                                <div class="flex align-center">
                                    <div class="stand-header-company">
												<span class="mEGBK stand-header-logo">
													<a class="eccJFs link-cursor clickthrough-logo" target="_blank"
                                                       rel="">

														<img th:src="${shop.logo}"
                                                             class="bWQCCx">
													</a>
												</span>
                                        <span class="hZjMEj"></span>
                                    </div>
                                    <div class="shop-name">
                                        <p th:text="${shop.name}">北京小米汽车</p>
                                        <span th:text="${shop.mobile}">400-44444-555</span>
                                    </div>
                                </div>
                                <div class="eUJDYj">
                                    <ul class="stand-header-nav">
                                        <li>
                                            <a th:href="@{'../../shops/'+${shop.userId}+'.html'}">展商介绍</a>
                                        </li>
                                        <li>
                                            <a th:href="@{'../../shops/'+${shop.userId}+'/product/'+${shop.userId}+'.html'}">主导产品</a>
                                        </li>

                                        <li>
                                            <a th:href="@{'../../shops/'+${shop.userId}+'/news/'+${shop.userId}+'.html'}">新闻发布</a>
                                        </li>
                                        <li>
                                            <a
                                                    th:href="@{'../../shops/'+${shop.userId}+'/activity/'+${shop.userId}+'.html'}">活动预告</a>
                                        </li>
                                        <li>
                                            <a th:href="@{'../../shops/shopInfor-'+${shop.userId}+'.html'}"
                                            >联系方式</a>
                                        </li>
                                        <!-- <li>
                                            <a href="shopBusiness.html">商机</a>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hhRmUa">
                        <div class="bgJtti"></div>
                        <div class="kmmnYk jXJrhb shop-cont flex just-content-between">
                            <div class="fFDaJv TileInset detail-cont">
                                <div class="bdoYtI clearfix">
                                    <div class="dpJcfB">
                                        <div class="jqCkHq">
                                            <div class="iqnXZb">
                                                <div class="mediumContainer" id="mediumContainer">
                                                    <img th:src="${product.images}" alt="">
                                                </div>
                                                <!-- <div class="videoBox">
                                                    <video poster="" controls>
                                                        <source src="https://video.directindustry.com/video_di/videos/video-260531.mp4" type="video/mp4">
                                                    </video>
                                                </div> -->
                                                <!-- 放大镜 -->
                                                <div class="magnifier" id="magnifier">
                                                    <img src="../img/zoom_pup.png">
                                                </div>
                                                <div id="zhezhao"></div>
                                            </div>
                                            <!-- 大图 -->
                                            <div class="img_u" id="img_u">
                                                <img th:src="${product.images}">
                                            </div>
                                            <div class="elephu">
                                                <ul class="img_x" id="img_x">
                                                    <li th:each="image :${#strings.listSplit(product.productImages,',')}">
                                                        <img
                                                                th:src="${image}">
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="cuomqn">
                                            <div class="ilACaF">
														<span class="fa-stack" th:onclick="goSave([[${product}]])">
															<i class="fa fa-heart fa-stack-1x"></i></span>
                                                添加到我的收藏夹
                                            </div>
                                            <div class="bKqvEi" th:onclick="addGrabber(event,[[${product}]])">
														<span class="fa-stack">
															<i class="fa fa-columns fa-stack-1x grabber-icon"></i>
														</span>
                                                <span>添加到产品对比表</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fr detailRight">
                                        <h1 class="dozOVq">
													<span class="gCIlGa">
														<span class="VJmlf"
                                                              th:text="${product.productName}">超声波流量传感器</span>
														<span class="hSlGKq" th:text="${product.sep}">CM1106-C</span>
													</span>
                                            <div class="iZjOOz">
                                                <span class="grTeeu"
                                                      th:each="lable :${#strings.listSplit(product.productLable,',')}"
                                                      th:text="${lable}">空气</span>

                                            </div>
                                        </h1>
                                        <div class="dAzakD">
                                            <div class="djPegI">供应商：</div>
                                            <div class="keqDkL">
                                                <div class="supplierDetails">
                                                    <div class="kssjrL">
                                                        <div class="hySQQg">
                                                            <div class="fLJBCp" th:text="${product.shopName}">
                                                                Cubic Sensor
                                                            </div>
                                                            <div class="imIJvS" th:text="${shop.nationality}">China
                                                            </div>
                                                        </div>
                                                        <!-- <div class="fIuIoP">
                                                            <div class="gdOUdZ">
                                                                <span class="jyBvFp">
                                                                    <span
                                                                        style="display: inline-block; direction: ltr;">
                                                                        <span
                                                                            style="cursor: inherit; display: inline-block; position: relative;">
                                                                            <span style="visibility: hidden;">
                                                                                <span color="gray"
                                                                                    class="ldaOLN">★</span>
                                                                            </span>
                                                                            <span
                                                                                style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%;">
                                                                                <span color="#ffd700"
                                                                                    class="cBFJUU">★</span>
                                                                            </span>
                                                                        </span>
                                                                        <span
                                                                            style="cursor: inherit; display: inline-block; position: relative;">
                                                                            <span style="visibility: hidden;">
                                                                                <span color="gray"
                                                                                    class="ldaOLN">★</span>
                                                                            </span>
                                                                            <span
                                                                                style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%;">
                                                                                <span color="#ffd700"
                                                                                    class="cBFJUU">★</span>
                                                                            </span>
                                                                        </span>
                                                                        <span
                                                                            style="cursor: inherit; display: inline-block; position: relative;">
                                                                            <span style="visibility: hidden;">
                                                                                <span color="gray"
                                                                                    class="ldaOLN">★</span>
                                                                            </span>
                                                                            <span
                                                                                style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%;">
                                                                                <span color="#ffd700"
                                                                                    class="cBFJUU">★</span>
                                                                            </span>
                                                                        </span>
                                                                        <span
                                                                            style="cursor: inherit; display: inline-block; position: relative;">
                                                                            <span style="visibility: hidden;">
                                                                                <span color="gray"
                                                                                    class="ldaOLN">★</span>
                                                                            </span>
                                                                            <span
                                                                                style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 100%;">
                                                                                <span color="#ffd700"
                                                                                    class="cBFJUU">★</span>
                                                                            </span>
                                                                        </span>
                                                                        <span
                                                                            style="cursor: inherit; display: inline-block; position: relative;">
                                                                            <span>
                                                                                <span color="gray"
                                                                                    class="ldaOLN">★</span>
                                                                            </span>
                                                                            <span
                                                                                style="display: inline-block; position: absolute; overflow: hidden; top: 0px; left: 0px; width: 50%;">
                                                                                <span color="#ffd700"
                                                                                    class="cBFJUU">★</span>
                                                                            </span>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                                <span class="dvakPg">
                                                                    <span>Feedback on the quality of responses
                                                                        (from
                                                                        25 buyers)</span>
                                                                </span>
                                                            </div>
                                                        </div> -->
                                                        <!-- <div class="cBABQH">
                                                            <span>This seller generally responds in under
                                                                <strong>24
                                                                    hours</strong></span>
                                                        </div> -->
                                                    </div>
                                                    <div id="actionButtonId" class="fOLNoL">
                                                        <!-- <div class="jzltTl">
                                                            <a href="form.html" class="crxnIO">
                                                                <i class="kqKiJx fa fa-dollar"></i>
                                                                <span class="cDAjCn">咨询型号价格表</span>
                                                            </a>
                                                        </div> -->
                                                        <div class="jzltTl">
                                                            <a class="eiDWkH" th:onclick="goForm([[${product}]],[[${shop}]])">
                                                                <i class="kqKiJx fa fa-calculator"></i>
                                                                <span class="cDAjCn">个性化定制询盘</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="shop-box">
                                <div class="shop-logo">
                                    <img src="https://img.directindustry.com/images_di/logo-p/L54752.gif">
                                </div>
                                <div class="shop-phone">
                                    <div>
                                        <div class="shop-nav flex dire-column align-center">
                                            <a href="shop.html">展商介绍</a>
                                            <a href="shopProduct.html">展商产品</a>
                                            <a href="shopNews.html">展商新闻</a>
                                            <a href="shopActivity.html">展会活动</a>
                                        </div>
                                        <div class="line"></div>
                                    </div>
                                    <div>
                                        <div class="shop-lx">
                                            <p>联系人：张先生</p>
                                            <p>电话：010126554</p>
                                            <p>邮箱：12345@com.cn</p>
                                            <p>微信：zhangxiansheng</p>
                                            <p>QQ：123456789</p>
                                        </div>
                                        <div class="line"></div>
                                    </div>
                                </div>
                                <div class="shop-btn flex just-content-between">
                                    <a href="">在线留言</a>
                                    <a href="">递交名片</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hhRmUa">
                        <div class="kmmnYk cBFfGP">
                            <div class="fFDaJv">
                                <h2 class="cKPwRF">产品规格型号</h2>
                                <dl class="gedvae">
                                    <div th:each="param :${params}">
                                        <dt><span th:text="${param.title}">技术</span></dt>
                                        <dd><span th:text="${param.headerVal}">超声波</span></dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                        <div class="kmmnYk cBFfGP">
                            <div class="fFDaJv">
                                <h2 class="cKPwRF">产品介绍</h2>
                                <div class="chZLCL">
                                    <div class="hlEuXW" th:text="${product.mdesc}">超声波流量传感器</div>


                                </div>
                            </div>
                        </div>
                        <!-- <div class="kmmnYk cBFfGP">
                            <div class="fFDaJv">
                                <h2 class="cKPwRF">Catalogs</h2>
                                <div>
                                    <div class="ckOqsI">
                                        <i class="idXaMn fa fa-file-pdf"></i>
                                        <p class="kqzNkm">该产品还没有PDF产品手册</p>
                                    </div>
                                    <div class="fVLROG">
                                        <button type="button" class="ffInOh">
                                            <i class="kqKiJx fa fa-file-pdf-o" aria-hidden="true"></i>
                                            <span class="cDAjCn">索取PDF产品资料</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="container" style="margin: 30px auto;">
                <h4 class="jFvKRM"><span class="brmlpN">相关产品</span></h4>
                <div class="jmChuU" style="padding: 3px;"></div>
                <div class="dALGZw clearfix">
                    <div class="ePtQNc fGerKH card">
                        <div class="fFDaJv TileInset" th:each="item :${xgProduct}">
                            <div class="fbCVyG">
                                <a class="jQCsOM"
                                   th:href="@{'../../product/detail/'+${product.id}+'.html'}">
                                    <div class="dHdbST">
                                        <picture><img th:src="${item.images}"></picture>
                                    </div>
                                </a>
                                <div>
                                    <a th:href="@{'../../product/detail/'+${product.id}+'.html'}"
                                       class="hXrWiO">
                                        <img th:src="${shop.logo}"
                                             alt="PICVISA" loading="lazy">
                                    </a>
                                </div>
                                <a class="jQCsOM"
                                   th:href="@{'../../product/detail/'+${product.id}+'.html'}">
                                    <div class="WYEsF">
                                        <span class="bnZyoU"
                                              th:text="${item.productName}">photovoltaic moduletester</span>
                                        <!--												<span class="fFqYLA">PVM-1020KIT</span>-->
                                        <div class="iZjOOz">
												<span class="mpfqi"
                                                      th:each="item :${#strings.listSplit(product.productLable,',')}"
                                                      th:text="${item}">insulation</span>
                                        </div>
                                    </div>
                                    <div class="iDWJtQ">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="container" style="margin: 30px auto;">
                <h4 class="jFvKRM"><span class="brmlpN">已浏览的产品</span></h4>
                <div class="jmChuU"><a class="dKLMov forceCursor" onclick="emptyHistory()">清除历史记录</a></div>
                <div class="dALGZw history clearfix">
                    <!-- <div class="ePtQNc fGerKH card">
                        <div class="fFDaJv TileInset">
                            <div class="fbCVyG">
                                <a class="jQCsOM"
                                    href="https://www.directindustry.com/prod/sonel-sa/product-30613-2479368.html">
                                    <div class="dHdbST">
                                        <picture><img src="img/good.jpg"></picture>
                                    </div>
                                </a>
                                <div>
                                    <a href="https://www.directindustry.com/prod/picvisa-217886.html"
                                        class="hXrWiO">
                                        <img src="https://img.directindustry.com/images_di/logo-pp/L217886.gif"
                                            alt="PICVISA" loading="lazy">
                                    </a>
                                </div>
                                <a class="jQCsOM"
                                    href="https://www.directindustry.com/prod/sonel-sa/product-30613-2479368.html">
                                    <div class="WYEsF">
                                        <span class="bnZyoU">photovoltaic moduletester</span>
                                        <span class="fFqYLA">PVM-1020KIT</span>
                                        <div class="iZjOOz">
                                            <span class="mpfqi">insulation</span>
                                            <span class="mpfqi">safety</span>
                                            <span class="mpfqi">voltage</span>
                                        </div>
                                    </div>
                                    <div class="iDWJtQ">
                                    </div>
                                </a>
                            </div>
                            <div class="cardWithClose" title="删除">
                                <button aria-label="删除" type="button" class="dDKRIF">
                                    <i class="kqKiJx fa fa-close" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div> -->
                </div>
                <!-- <div class="kmmnYk fysqZM">
                    <div class="klKahh TileInset">
                        <div class="icjBAR">相关搜索</div>
                        <ul class="fMOaWa">
                            <li><a href="">AROpump</a></li>
                        </ul>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <div id="grabber" class="grabber">
        <div id="grabberActions" class="grabberActions" onclick="showGrabber(this)">
            <div id="grabberCounter" class="grabberCounter"><span>1</span>/10对比产品</div>
            <div id="grabberCompareBtn" onclick="goGrabber(event)"
                 class="grabberCompareBtn grabberBtn btn btn-mcl">
                对比
            </div>
            <div id="grabberEmptyBtn" onclick="emptyGrabber(event)" class="grabberEmptyBtn grabberBtn btn">
                清空对比产品
            </div>
        </div>
        <div id="grabberProductDetails" class="grabberProductDetails">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide grabberMoreProducts">
                        对比多达10种产品
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-page"></div>
    <div class="login-cli"></div>
</div>
<script th:inline="javascript">
    $(function () {
        $(".header-page").load("http://122.14.195.113:8089/header.html");
        $(".footer-page").load("http://122.14.195.113:8089/footer.html");
        $(".login-cli").load("http://122.14.195.113:8089/login-cli.html");
    });
    var swiper = new Swiper('.swiper-shop', {
        spaceBetween: 0,
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        observer: true,
        observeParents: true,
        watchOverflow: true
    });
    $(function () {
        $('#img_x li').eq(0).css('border', '2px solid #2888c4');
        $('#zhezhao').mousemove(function (e) {
            $('#img_u').show();
            $('#magnifier').show();
            var left = e.offsetX - parseInt($('#magnifier').width()) / 2;
            var top = e.offsetY - parseInt($('#magnifier').height()) / 2;
            console.log(left);
            console.log(top);
            left = left < 0 ? 0 : left;
            left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier')
                .outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier')
                .outerWidth())) : left;
            top = top < 0 ? 0 : top;
            top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier')
                .outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier')
                .outerHeight())) : top;

            $('#magnifier').css('left', left + 'px');
            $('#magnifier').css('top', top + 'px');

            var leftRate = left / parseInt($('#zhezhao').outerWidth());
            var bigLeft = leftRate * parseInt($('#img_u img').outerWidth());
            $('#img_u img').css('margin-left', -bigLeft + 'px');

            var topRate = top / parseInt($('#zhezhao').outerHeight());
            var bigTop = topRate * parseInt($('#img_u img').outerHeight());
            $('#img_u img').css('margin-top', -bigTop + 'px');
        })
        $('#zhezhao').mouseleave(function () {
            $('#img_u').hide();
            $('#magnifier').hide();
        })

        $('#img_x li').mouseover(function () {
            $(this).css('border', '2px solid #2888c4').siblings().css('border', '2px solid transparent');
            $('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(
                this).index() + 1) + '_w_2.jpg');
            $('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this)
                .index() + 1) + '_u_2.jpg');
        })

    });
</script>
</body>
</html>
